<template>
	<view class="container uni-pb-16">
		<uwo-nav-bar bgColor="#2979ff">
			<template #content>任务详情</template>
		</uwo-nav-bar>
		<uni-forms :label-width="75">
			<uwo-collapse :expanding="index === 0" v-for="(group, index) in dataSource" :key="index">
				<template #title>
					<view class="">
						{{ group.groupName }}
					</view>
				</template>
				<view class="uni-pa-8" v-for="(child, idx) in group.child" :key="idx">
					<view class="">{{ idx + 1 }}、{{ child.title }}</view>
					<!-- <view class="text-info uni-mt-4">说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</view> -->
					<uni-row :gutter="10" class="uni-mt-10">
						<uni-col :span="8">
							<button class="cu-btn block" :class="[child.state === '1' ? 'bg-primary' : 'line-primary']">符合</button>
						</uni-col>
						<uni-col :span="8">
							<button class="cu-btn block" :class="[child.state === '2' ? 'bg-error' : 'line-error']">不符合</button>
						</uni-col>
						<uni-col :span="8">
							<button class="cu-btn block" :class="[child.state === '3' ? 'bg-warning' : 'line-warning']">不适用</button>
						</uni-col>
					</uni-row>
					<!-- 不符合，提交隐患 -->
					<view class="bg-primary-1 uni-radius-lg uni-mt-8 uni-pa-8" v-if="child.state === '2'">
						<uni-forms-item label="隐患名称">
							<view class="text-view">{{ child.t.title }}</view>
						</uni-forms-item>
						<uni-forms-item label="文件上传" class="solids-top uni-pt-8">
							<uwo-upload v-model="child.t.troubleImg" :disabled="true"></uwo-upload>
							<!-- <view class="text-info">建议宽高比例750*450</view> -->
						</uni-forms-item>
						<uni-forms-item label="性别" class="solids-top uni-pt-8">
							<view class="text-view">{{ child.t.title }}</view>
						</uni-forms-item>
						<uni-forms-item label="兴趣爱好" class="solids-top uni-pt-8">
							<view class="text-view">{{ child.t.title }}</view>
						</uni-forms-item>
					</view>
					<!-- 不适用，添加说明 -->
					<view class="bg-warning-1 uni-radius-lg uni-mt-8 uni-pa-8" v-if="child.state === '3'">
						<uni-forms-item label="自我介绍">
							<view class="text-view">{{ child.remark }}</view>
						</uni-forms-item>
					</view>
				</view>
			</uwo-collapse>
		</uni-forms>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getEnv } from '@/common/config.js';

const dataSource = ref([]);
const get = () => {
	uni.showLoading({
		title: '加载中。。。'
	});
	const rows = [];
	for (var i = 0; i < 10; i++) {
		const child = [];
		for (var x = 0; x < 10; x++) {
			const random = Math.floor(Math.random() * 10);
			const c = {
				id: i + '' + x + 'n',
				title: '我是检查项我是检查项我是检查项我是检查项我是检查项我是检查项我是检查项' + x,
				state: random % 3 == 0 ? '3' : random % 2 == 0 ? '2' : '1'
			};
			if (c.state === '2') {
				const t = {
					title: '隐患名称',
					troubleImg: [
						{
							path: getEnv().API_URL_STATIC + '/dev/20230913/991063becfde4e299a41f48fd332157e.jpeg',
							url: null,
							name: '1694569144725.jpeg',
							suffix: 'jpeg',
							size: 197117
						}
					]
				};
				c.t = t;
			} else if (c.state === '3') {
				c.remark = '不适用备注';
			}
			child.push(c);
		}
		rows.push({
			groupName: '我是分组名称' + i,
			child: child
		});
	}
	setTimeout(() => {
		dataSource.value = rows;
		uni.hideLoading();
	}, 1000);
};
onMounted(() => {
	get();
});
</script>

<style lang="scss" scoped>
.container {
}
.content {
	background-color: #ffffff;
}
</style>
